<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo</title>
    <style type="text/css">
        .center{
            text-align:center;
            #color:red;
            background:gray;
            height:20px;
        }
        #dom_id{
            text-align:left;
            color:green;
        }
        .dom{
            text-align:left;
            color:red;
        }
        .menu{
            float:left;
            width:200px;
            display:block;
            bottom:0px;
            background-color:#f3f3f4;
        }
        .content{
            position:relative;
            left:200px;
        }

    </style>
</head>
<body onload="checkCookies()">

    <div>
        <h1 style="color:blue;text-align:center">
            <img src="picture/demo.png" width="100px" height="50px" alt="admin manage system" align="left">
            后台管理系统
        </h1>
        <hr/>
    </div>

        <div class="menu" onclick="">
        <p>仪表盘</p>
        <p>主机管理</p>
        <p>content1</p>
        <p>content2</p>
        <p>资产管理</p>
        <p>content1</p>
        <p>content2</p>
        <p>权限管理</p>
        <p>content1</p>
        <p>content2</p>
       <p>会话管理</p>
        <p>content1</p>
        <p>content2</p>
        <p>作业中心</p>
        <p>content1</p>
        <p>content2</p>
        <p>日志审计</p>
        <p>content1</p>
        <p>content2</p>
        <p>系统设置</p>
        <p>content1</p>
        <p>content2</p>
    </div>
        <div class="content">
        <form action="http://www.baidu.com" method="post" target="_blank">
          <div>
              用户名:<input type='text' value='user' placeholder="用户名"/>
          </div>
            <div>
                密码:<input type='password' value='pwd' placeholder="密码"/>
            </div>
            <div>
                请选择你的车:<select>
                    <option value="volvo">volvo</option>
                    <option value="bmw">bmw</option>
                    <option value="benz">benz</option>
                </select>
            </div>
            <div>
                <input type="file"/>
            </div>
            <p>
                爱好:
                <input type="checkbox" name="hobby" value="读书"/>读书
                <input type="checkbox" name="hobby" value="跑步"/>跑步
                <input type="checkbox" name="hobby" value="游泳"/>游泳
            </p>
            <p>条款及协议:</p>
            <textarea rows="5" cols="30">
                you must agree it and then continue...



                do you know it?
            </textarea><br/>
            <input type="radio" name="protocol" />同意
            <input type="radio" name="protocol" />不同意
            <div>
                <input type="submit" value="提交"/>
            </div>
            <div>
                <input type="button" value="点我呀!" onclick="foo()"/>
            </div>
            <div>
                <button>我是一个按钮！</button>
            </div>
    </form>
        <br/>
               <p>cmdb</p>
        <table border="5">
            <tr>
                <td>hostname</td>
                <td>ip</td>
            </tr>
            <tr>
                <td>c1.puppet.com</td>
                <td>1.1.1.1</td>
                <td><input type="button" value="edit" onclick="ed()"/></td>
                <td><input type="button" value="delete" onclick="del()"/></td>
            </tr>
            <tr>
                <td>c2.puppet.com</td>
                <td>1.1.1.2</td>
                <td><input type="button" value="edit" onclick="ed()"/></td>
                <td><input type="button" value="delete" onclick="del()"/></td>
            </tr>
        </table>
        <div id="dom_id" class="dom">dom_id test</div>
        <div id="dom_class" class="dom" >dom_class test</div>
        <span onmouseover="mOver(this)"
             onmouseout="mOut(this)">
            鼠标提示
        </span>
        <div onclick="this.innerHTML='SB'">点我呀</div>
        <script type="text/javascript">
            function foo(){
                alert('sb');
            }
            document.write("<h1>hello,javascript!</h1>");
            function del(){
                var r=confirm("确定删除?");
                if (r==true){
                        alert("你选择了'yes'!");
                    }
                else {
                        alert("你选择了'no'!");
                    }
            }
            function ed(){
                alert("编辑中...");
            }
            var myCar=new Array("saab","bmw","benz");
            for (i in myCar){
                document.write("my car is "+ myCar[i]+"<br/>");
            }
            for(var i=1;i<=3;i++){
                document.write("i am NO."+i+"<br/>");
            }
            var x=document.getElementById("dom_id");
            document.write(x.innerHTML+"<br/>");
            var d1=document.getElementsByClassName("dom")[1];
            document.write(d1.firstChild.nodeValue+"<br/>");
            var d0=document.getElementsByClassName("dom")[0];
            document.write(d0.firstChild.nodeValue+"<br/>");
            document.write(Date());
            document.getElementById("dom_class").innerHTML="dom_class changed";
            document.getElementById("dom_class").style.color="blue";
            var para=document.createElement("p");
            var node=document.createTextNode("dom new add p");
            para.appendChild(node);
            var target=document.getElementById("dom_class");
            target.appendChild(para);
            function mOver(obj){
                obj.innerHTML="快离开";
            }
            function mOut(obj){
                obj.innerHTML="靠近我";
            }
            function checkCookies(){
                if (navigator.cookieEnabled==true){
                        alert("cookies are enabled")
                    }
                else{alert("cookies are disabled")}
            }
        </script>

            </div>
<hr/>
    <div class="center">
        copyright by 上海怒吼 2017-2019
    </div>


</body>
</html>